<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            font-size: 24px;
            position: absolute;
            right: 0;
            top: 0;
            line-height: 50px;
            padding: 0 20px;
            color: darkred;
            background: lightblue;
            background: -webkit-linear-gradient (top left, lightblue, lightcoral, lightcyan);

        }
    </style>
</head>

<body>

    <div class="box">
    </div>

    <script>

        /* let time = new Date();
        console.log(time); //Mon Oct 14 2019 23:34:14 GMT+0800 (中国标准时间)
        // 获取的结果不是字符串是对象数据类型的，属于日期对象(或者说是Date这个类的实例对象)
        console.log(time.toLocaleString()); */


        let clockBox = document.querySelector('.box')
        /*
        queryDate : 获取当前的日期，把其转换为想要的格式
        */
        queryDate();
        // 不足十位 补足0
        function addZero(val) {
            val = Number(val);
            return val < 10 ? '0' + val : val;
        }
        //封装 时间
        function queryDate() {
            let time = new Date(),
                year = time.getFullYear(),
                month = time.getMonth(),
                day = time.getDate(),
                week = time.getDay(),
                hours = time.getHours(),
                minutes = time.getMinutes(),
                seconds = time.getSeconds();
            let res = year + '年' + month + '月' + day + '日';

            let weekAry = ['日', '一', '二', '三', '四', '五', '六']
            res += ' 星期' + weekAry[week] + ' ';
            res += addZero(hours) + " : " + addZero(minutes) + " : " + addZero(seconds);
            clockBox.innerHTML = res;
        }

        // 加载到页面 一直更新
        setInterval(() => {
            queryDate()
        }, 1000);


    </script>

</body>

</html>